<div class="col-sm-10">

    <div class="page-header" style="margin-top: -20px;margin-bottom: 5px;">
        <h2>用户管理</h2>
    </div>

    <!--用户处理框-->
    <div class="panel panel-default">
        <div class="panel-body">
            <!--搜索栏-->
            <div class="navbar-collapse" id="bs-example-navbar-collapse-1">

                <nav class="navbar navbar-default">
                    <div class="container-fluid">
                        <div class="navbar-header">
                            <form class="navbar-form navbar-left">
                                <div class="form-group">
                                    搜索：
                                    <input id="search_input" type="text" class="form-control" placeholder="Search">
                                </div>

                                <button class="btn btn-default" type="button" id="search_btn">查询</button>
                                <button class="btn btn-success" type="button" id="user_add_btn">添加用户</button>
                                <button class="btn btn-danger" type="button" id="user_delete_checked_btn">多选删除</button>
                                <button class="btn" type="button" id="test1Btn">测试按钮1</button>

                            </form>
                        </div>
                    </div>
                </nav>

            </div>


            <div class="navbar-collapse" id="bs-example-navbar-collapse-2">
                <!--表格-->
<!--                用于显示用户信息的表格-->
                <table id="user_curd_table" class="table table-hover table-bordered table-striped">
                    <caption></caption>
                    <thead>
                    <tr>
                        <th>
                            <input type="checkbox" id="user_check_all">
                        </th>
                        <th>id</th>
                        <th>用户名</th>
                        <th>昵称</th>
                        <th>密码</th>
                        <th>邮箱</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                    </tr>

                    </tbody>
                </table>

            </div>
        </div>

<!--        该行用于显示分页信息-->
        <div class="row">
<!--            该列用于显示页数信息-->
            <div id="page_info" class="col-md-4 text-center">
                <p>当前页:&nbsp;&nbsp;页显示量:&nbsp;&nbsp;总页数:&nbsp;&nbsp;总数据量:</p>
            </div>
<!--            该列用于显示分页导航条-->
            <div class="col-md-offset-2 col-md-6">
                <nav aria-label="Page navigation">
                    <ul id="page_nav" class="pager">
                    </ul>
                </nav>
            </div>
        </div>

    </div>
    <!--消息提示框-->
<!--    <div class="alert alert-success alert-dismissible" role="alert">-->
<!--        <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span-->
<!--                aria-hidden="true">&times;</span></button>-->
<!--        <strong>删除成功：</strong>当前数据以被删除！-->
<!--    </div>-->
<!--    <div class="alert alert-danger alert-dismissible" role="alert">-->
<!--        <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span-->
<!--                aria-hidden="true">&times;</span></button>-->
<!--        <strong>删除失败：</strong>java.lang.RuntimeException 删除数据无效！-->
<!--    </div>-->
</div>
</div>


<!--添加用户对话框-->
<div class="modal fade" id="add_user_modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title">添加用户信息</h4>
            </div>
            <div class="modal-body">

                <form id="add_user_form" class="form-horizontal">
                    <div class="form-group" style="display:none">
                        <label class="col-sm-2 control-label">ID</label>
                        <div class="col-sm-10">
                            <input type="text" name="id" class="form-control" id="id_add_input" disabled>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">用户名</label>
                        <div class="col-sm-10">
                            <!-- placeholder是显示输入提示的属性 -->
                            <!-- name属性的值与实体类的属性名相同是为了能自动进行类对象的实例化 -->
                            <input type="text" name="username" class="form-control" id="username_add_input"
                                   placeholder="用户名(6-20位的英文字符或数字)">
                            <span class="help-block"></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">昵称</label>
                        <div class="col-sm-10">
                            <input type="text" name="nickname" class="form-control" id="nickname_add_input"
                                   placeholder="昵称(4-10位的字符)">
                            <span class="help-block"></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">密码</label>
                        <div class="col-sm-10">
                            <input type="password" name="password" class="form-control" id="password_add_input"
                                   placeholder="密码(6-20位的英文字符或数字)">
                            <span class="help-block"></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">邮箱</label>
                        <div class="col-sm-10">
                            <input type="email" name="email" class="form-control" id="email_add_input"
                                   placeholder="邮箱(example@xx.com)">
                            <span class="help-block"></span>
                        </div>
                    </div>
                </form>

            </div>
            <div class="modal-footer">
                <button type="button" id="user_add_cancel" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" id="user_add_confirm" class="btn btn-primary">确认</button>
            </div>
        </div>
    </div>
</div>

<!--修改用户对话框-->
<div class="modal fade" id="update_user_modal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title">编辑用户信息</h4>
            </div>
            <div class="modal-body">

                <form id="update_user_form" class="form-horizontal">
                    <div class="form-group" style="display:none">
                        <label class="col-sm-2 control-label">ID</label>
                        <div class="col-sm-10">
                            <input type="text" name="id" class="form-control" id="id_update_input" disabled>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">用户名</label>
                        <div class="col-sm-10">
                            <!-- placeholder是显示输入提示的属性 -->
                            <!-- name属性的值与实体类的属性名相同是为了能自动进行类对象的实例化 -->
                            <input type="text" name="username" class="form-control" id="username_update_input"
                                   placeholder="用户名(6-20位的英文字符或数字)">
                            <span class="help-block"></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">昵称</label>
                        <div class="col-sm-10">
                            <input type="text" name="nickname" class="form-control" id="nickname_update_input"
                                   placeholder="昵称(4-10位的字符)">
                            <span class="help-block"></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">密码</label>
                        <div class="col-sm-10">
                            <input type="password" name="password" class="form-control" id="password_update_input"
                                   placeholder="密码(6-20位的英文字符或数字)">
                            <span class="help-block"></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">邮箱</label>
                        <div class="col-sm-10">
                            <input type="email" name="email" class="form-control" id="email_update_input"
                                   placeholder="邮箱(example@xx.com)">
                            <span class="help-block"></span>
                        </div>
                    </div>
                </form>

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" id="update_user_btn" class="btn btn-primary">修改</button>
            </div>
        </div>
    </div>
</div>

<!-- 该模态框用于删除用户 -->
<div class="modal fade" id="delete_user_modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <!-- 模态框标题 -->
                <h4 class="modal-title">删除用户</h4>
            </div>
            <div class="modal-body">
                <p id="delete_tip_p">模态框内容</p>
                <p id="delete_id_p" style="visibility: hidden"></p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" id="delete_user_btn" class="btn btn-danger">确认</button>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    //定义一些页面变量
    var totalRecords;
    var nowPage;
    var errInputClass = "has-error";
    var to_page_finish = false;
    var bindOnEvent_finish = false;

    //加载页面后进行的操作
    $(function () {
        startWaiting();
        //发送跳转请求到用户表第1页
        to_page(1);
        //绑定按钮点击事件
        bindOnEvent();
        checkIsFinish();
    });

    /**
     * 该方法用于开始等待页面数据填充
     */
    function startWaiting(){
        //弹出等待模态框
        $('#wait_modal').modal({
            show: true,
            backdrop: 'static'
        });
    }

    /**
     * 该方法用于循环等待并判断是否已结束了页面加载，若是则结束，若否则继续等待
     */
    function checkIsFinish(){
        let intervalID = setInterval(function () {
            console.log("持续等待页面加载...");
            // let to_page_finish = (sessionStorage.getItem("to_page_finish") === "true");
            // let bindOnEvent_finish = (sessionStorage.getItem("bindOnEvent_finish") === "true");
            if (to_page_finish&&bindOnEvent_finish){//如果可以结束，则结束
                console.log("页面加载完成!");
                // sessionStorage.removeItem("to_page_finish");
                // sessionStorage.removeItem("bindOnEvent_finish");
                //关闭等待模态框
                $('#wait_modal').modal('hide');
                clearInterval(intervalID);//结束循环
            }
        },200);
    }


    //该方法用于跳转到页面并查询
    function to_page(pn) {
        to_page_finish = false;
        let searchString = $("#search_input").val();
        console.log("当前搜索条件为:"+searchString);
        $.ajax({
            url: userWithRoleInterface,//非Rest
            data: "pn=" + pn +"&search=" + searchString,
            type: "GET",
            beforeSend: function(XMLHttpRequest ) {
                //在请求头部设置accessToken
                XMLHttpRequest.setRequestHeader("accessToken", sessionStorage.getItem("accessToken"));
            },
            //请求成功后的回调函数
            //result是请求成功后返回的Json结果
            success: function (result) {
                // 构建用户表
                build_user_table(result);
                // 构建构建页数信息条
                build_page_info(result);
                // 构建分页导航条
                build_user_nav(result);
            },complete: function () {
                to_page_finish = true;
            }
        });
    }

    //该方法用于构建用户数据表
    function build_user_table(result) {
        let $userTable = $("#user_curd_table tbody");
        $userTable.empty();//添加前需要先清空

        let userList = result.dataMap.pageInfo.list;//用户的信息表
        let tableSize = result.dataMap.pageInfo.pageSize;//数据表每行的数量
        let createNums = 0;//当前已创建数据行的数量

        //Jquery里的$.each()遍历中，index代表当前遍历的索引，item代表当前遍历的数据
        $.each(userList, function (index, item) {
            // showMsg = showMsg + index+":"+ item.id+":"+item.username+"\n";
            let $checkbox = $("<input type='checkbox' class='user_check_item'/>");//创建选框
            $checkbox.val(item.id);//给该checkbox加上id
            let $checkboxTd = $("<td></td>").append($checkbox);//创建选框格并加入选框
            let $userIdTd = $("<td></td>").append(item.id);//创建id格并加入id数据
            let $roleNameTd = $("<td></td>").append(item.username);//创建用户名格并加入用户名数据
            let $nicknameTd = $("<td></td>").append(item.nickname);//创建昵称格并加入昵称数据
            let $passwordTd = $("<td></td>").append("******");//创建密码格并加入密码数据
            let $emailTd = $("<td></td>").append(item.email);//创建邮箱格并加入邮箱数据
            let $updateBtn = $("<button class=\"btn btn-primary btn-sm update_user_btn\">修改</button>");
            let $deleteBtn = $("<button class=\"btn btn-danger btn-sm delete_user_btn\" style='margin-left: 10px;'>删除</button>");
            let $operationTd = $("<td></td>").append($updateBtn).append($deleteBtn);//创建操作格并加入操作按钮

            let $userTr = $("<tr></tr>")//创建用户数据行并加入各种数据格子
                .append($checkboxTd)
                .append($userIdTd)

                .append($roleNameTd)
                .append($nicknameTd)
                .append($passwordTd)
                .append($emailTd)
                .append($operationTd);

            $userTable.append($userTr);//将数据行加入表格中
            createNums++;//已创建数据行的数量加1
        })

        //构造空数据行
        for (let i = createNums; i < tableSize; i++) {
            let $userTr = $("<tr></tr>");//创建用户数据行并加入各种数据格子
            for (let j = 0; j < 7; j++) {
                let $nullTd = $("<td>&nbsp;</td>");//创建选框
                $userTr.append($nullTd);//加入选框
            }
            $userTable.append($userTr);//将数据行加入表格中
        }
    }

    //该方法用于构建页数信息条
    function build_page_info(result) {
        let $pageInfo = $("#page_info");
        $pageInfo.empty();//先清空"页数信息条"里的信息

        let pageNum = result.dataMap.pageInfo.pageNum;//当前页码
        let pageSize = result.dataMap.pageInfo.pageSize;//页容量
        let pages = result.dataMap.pageInfo.pages;//总页数
        let total = result.dataMap.pageInfo.total;//总数据量

        nowPage = pageNum;
        totalRecords = total;
        // sessionStorage.setItem("nowPage",pageNum);
        // sessionStorage.setItem("totalRecords",total);
        //totalRecords = total;

        let $pageInfoP = $("<span></span>").append(
            "当前页:" + pageNum + "&nbsp;&nbsp;" +
            "页显示量:" + pageSize + "&nbsp;&nbsp;" +
            "总页数:" + pages + "&nbsp;&nbsp;" +
            "总数据量:" + total);

        $pageInfo.append($pageInfoP);//再往"页数信息条"里添加信息
    }

    //该方法用于构建分页导航条
    function build_user_nav(result) {
        let $navUl = $("#page_nav");//找到需要被添加的导航栏对象
        $navUl.empty();//添加前需要先清空

        let pageNum = result.dataMap.pageInfo.pageNum;//当前页码
        let pageSize = result.dataMap.pageInfo.pageSize;//页容量
        let pages = result.dataMap.pageInfo.pages;//总页数
        let total = result.dataMap.pageInfo.total;//总数据量
        let isFirstPage = result.dataMap.pageInfo.isFirstPage;//是否是首页的标识
        let isLastPage = result.dataMap.pageInfo.isLastPage;//是否是尾页的标识
        let navigatepageNums = result.dataMap.pageInfo.navigatepageNums;//导航栏要显示的数字们

        let $firstPageLi = $("<li></li>").append(
            $("<a></a>").append("首页").attr("href", "#")
        );
        let $prePageLi =
            $("<li></li>").append(
                $("<a></a>").append(
                    $("<span></span>").append("&laquo;")
                ).attr("href", "#")
            );

        let $nextPageLi =
            $("<li></li>").append(
                $("<a></a>").append(
                    $("<span></span>").append("&raquo;")
                ).attr("href", "#")
            );
        let $lastPageLi = $("<li></li>").append(
            $("<a></a>").append("尾页").attr("href", "#")
        );

        //如果是首页，则有两个按钮不能点击
        if (isFirstPage) {
            $firstPageLi.addClass("disabled");//第一页li添加disabled的class
            $firstPageLi.find("a").removeAttr("href");//找到第一页li下的a标签并清除属性

            $prePageLi.addClass("disabled");//前一页li添加disabled的class
            $prePageLi.find("a").removeAttr("href");//找到前一页li下的a标签并清除href属性
        } else {
            $firstPageLi.click(function () {
                to_page(1);
            });
            $prePageLi.click(function () {
                to_page(pageNum - 1);
            });
        }

        //如果是尾页，则有两个按钮不能点击
        if (isLastPage) {
            $lastPageLi.addClass("disabled");//最后页li添加disabled的class
            $lastPageLi.find("a").removeAttr("href");//找到最后页li下的a标签并清除属性

            $nextPageLi.addClass("disabled");//后一页li添加disabled的class
            $nextPageLi.find("a").removeAttr("href");//找到后一页li下的a标签并清除href属性
        } else {
            $lastPageLi.click(function () {
                to_page(pages);
            });
            $nextPageLi.click(function () {
                to_page(pageNum + 1);
            });
        }

        //添加"首页"按钮
        $navUl.append($firstPageLi);
        //添加"上一页"按钮
        $navUl.append($prePageLi);
        //遍历添加所有要显示的页码
        $.each(navigatepageNums, function (index, item) {
            let $numLi = $("<li></li>").append(
                $("<a></a>").append(item).attr("href", "#")
            );
            //如果目前的页码真的与遍历页码相等
            if (pageNum == item) {
                $numLi.addClass("active");
                $numLi.empty();//清除里面能点击的a标签
                $numLi.append(
                    $("<span></span>").append(item).append(
                        $("<span></span>").addClass("sr-only")
                    )
                );
            }
            //设置显示的页码格子的点击事件
            $numLi.click(function () {
                to_page(item);
            });

            $navUl.append($numLi);//将每一个要显示的页码加入导航栏中
        });
        //添加"下一页"按钮
        $navUl.append($nextPageLi);
        //添加"尾页"按钮
        $navUl.append($lastPageLi);

        //给该分页条修改magin
        $navUl.css({
            margin : 5
        });
    }

    /**
     * 该方法用于清除错误提示
     */
    function clearUserForm() {
        let $username_add_input = $("#username_add_input");
        let $password_add_input = $("#password_add_input");
        let $email_add_input = $("#email_add_input");
        //移除所有的错误提示样式
        $username_add_input.parent().removeClass("has-error");
        $username_add_input.next("span").empty();
        $password_add_input.parent().removeClass("has-error");
        $password_add_input.next("span").empty();
        $email_add_input.parent().removeClass("has-error");
        $email_add_input.next("span").empty();
    }


    /**
     * 该方法用于检查用户添加表格
     */
    function checkUserForm() {
        let $username_add_input = $("#username_add_input");
        let $password_add_input = $("#password_add_input");
        let $email_add_input = $("#email_add_input");

        let username_input = $username_add_input.val();
        let password_input = $password_add_input.val();
        let email_input = $email_add_input.val();

        let result = true;

        //开始时移除所有的错误提示样式
        clearUserForm();



        return result;
    }

    /**
     * 该方法用于给控件下方的单个位置显示错误
     * @param errorMap为带有错误的map对象
     */
    function showAllErrors(errorMap) {
        //显示所有错误前需清空前面的错误
        clearAllError();
        //遍历所有的错误，并显示出来
        for (let errorName in errorMap){
            // console.log("---------------------------");
            // console.log(key);
            // console.log(errorMap[key]);
            showSingleError(errorName,errorMap[errorName]);
        }
    }

    /**
     * 该方法用于给控件下方的单个位置显示错误
     */
    function showSingleError(selectorName, errorMsg) {
        //添加错误显示并添加错误信息
        $("input[name='" + selectorName + "'],select[name='" + selectorName + "']").parents(".form-group").addClass("has-error");
        $("input[name='" + selectorName + "'],select[name='" + selectorName + "']").parent().parent().find("span.help-block").append(errorMsg);
    }

    /**
     * 该方法用于给所有控件下方的位置清除错误
     */
    function clearAllErrors() {
        $("input,select").parents().removeClass("has-error");
        $("input,select").parent().parent().find("span.help-block").empty();
    }


    /**
     * 该方法用于给控件绑定事件
     */
    function bindOnEvent() {
        bindOnEvent_finish = false;
        //搜索按钮的点击事件
        $('#search_btn').off("click").click(function () {
            to_page(1);//搜索时默认只能跳到第1页
        });

        //test1Btn
        $('#test1Btn').off("click").click(function () {
            alertUtil.message("测试消息", "warning");
        });

        //绑定弹出添加用户模态框按钮的点击事件
        $('#saveBtn').off("click").click(function () {
            //调用html元素的清除表单数据方法
            $("#add_user_form")[0].reset();
            //清除错误提示
            clearAllError();
            //弹出模态框
            $('#saveUserModal').modal({
                backdrop: 'static'
            });
        });

        $("#user_delete_checked_btn").off("click").click(function () {
            let idListStr = "";
            let nameList = "";
            let bCanShowModal = false;//是否能显示模态框的标识
            //获取删除前的提示信息
            $(".user_check_item:checked").each(function (index,item) {
                if (index < $(".user_check_item:checked").length - 1){//还不是最后一个时
                    idListStr = idListStr + $(item).val() + "," ;
                    nameList = nameList + $(item).parents("tr").find("td:eq(2)").text() + "," ;
                }else {
                    idListStr = idListStr + $(item).val() ;
                    nameList = nameList + $(item).parents("tr").find("td:eq(2)").text();
                }
                bCanShowModal = true;//进入循环则说明有选中，则可以弹出
            });
            // alertUtil.message(nameList,"info");//提示名字信息
            $("#delete_id_p").empty().text(idListStr);//显示要删除的信息
            $("#delete_tip_p").empty()
                .append("确认删除用户<strong>[" + nameList + "]</strong>吗？<strong>注意，此操作不可逆！</strong>");//添加删除的提示

            if (bCanShowModal){
                //弹出删除模态框
                $("#delete_user_modal").modal({//弹出模态框
                    backdrop: "static"
                });
            }else {
                alertUtil.message("你还未选中任何用户!","danger");//提示
            }
        });
        
        //给各输入框添加焦点模糊事件
        // let $username_add_input = $("#username_add_input");
        // let $password_add_input = $("#password_add_input");
        // let $email_add_input = $("#email_add_input");
        // $username_add_input.bind("input propertychange", function () {
        //     checkUserForm();
        // });
        // $password_add_input.bind("input propertychange", function () {
        //     checkUserForm();
        // });
        // $email_add_input.bind("input propertychange", function () {
        //     checkUserForm();
        // });

        $(document).off("input propertychange", "#update_user_modal input")
            .on("input propertychange", "#update_user_modal input",
                function () {
                    //检查前必须先清除错误提示
                    clearAllError();
                    let id = $("#update_user_modal input[name='id']").val();
                    let username = $("#update_user_modal input[name='username']").val();
                    let password = $("#update_user_modal input[name='password']").val();
                    let nickname = $("#update_user_modal input[name='nickname']").val();
                    let email = $("#update_user_modal input[name='email']").val();

                    let userData = {
                        id: id,
                        username: username,
                        password: password,
                        nickname: nickname,
                        email: email
                    };
                    let userJsonData = JSON.stringify(userData);
                    $.ajax({//请求修改该角色
                        url: userInterface,
                        data: userJsonData,
                        contentType: 'application/json;charset=utf-8',
                        type: "POST",
                        beforeSend: function(XMLHttpRequest ) {
                            //在请求头部设置accessToken
                            XMLHttpRequest.setRequestHeader("accessToken", sessionStorage.getItem("accessToken"));
                        },
                        //请求成功后的回调函数
                        //result是请求成功后返回的Json结果
                        success: function (result) {
                            if (result.code == 200) {
                                // alertUtil.message(result.msg);
                            } else {
                                let errorMap = result.dataMap.fieldErrors;
                                showAllError(errorMap);
                                // alertUtil.message(result.msg, "danger");
                            }
                        },
                        error: function () {
                            alertUtil.message("服务器后端未响应!", "danger");
                        }
                    });
                });


        //绑定添加
        $(document).off("click", ".user_check_item").on("click", ".user_check_item", function () {

        });

        //绑定测试的按钮的点击事件
        $("#test1_btn").off("click").click(function () {
            alertUtil.message("我是弹出框的显示的结果"); // 直接调用commonUtil对象的message方法
        });

        //绑定弹出添加用户模态框按钮的点击事件
        $("#user_add_btn").off("click").click(function () {
            //调用html元素的清除表单数据方法
            // $("#add_user_form")[0].reset();
            //清除错误提示
            clearAllError();
            //弹出模态框
            $("#add_user_modal").modal({
                backdrop: "static"
            });
        })

        //绑定添加用户模态框的确认添加按钮的点击事件
        $("#user_add_confirm").off("click").click(function () {
            //使用jq自带的序列化方法直接将表格中的数据取出
            let userData = $("#add_user_form").serialize();
            // alert(userData);

            if (true) {//如果检查表格成功checkUserForm()
                let username = $("#username_add_input").val();
                let nickname = $("#nickname_add_input").val();
                let password = $("#password_add_input").val();
                let email = $("#email_add_input").val();
                let userData = {
                    username: username,
                    nickname: nickname,
                    password: password,
                    email: email
                };
                let userJsonData = JSON.stringify(userData);
                console.log("userData:" + userData);
                console.log("userJsonData:" + userJsonData);

                $.ajax({//请求保存该角色
                    url: userWithRoleInterface,
                    data: userJsonData,
                    contentType: 'application/json;charset=utf-8',
                    type: "POST",
                    beforeSend: function(XMLHttpRequest ) {
                        //在请求头部设置accessToken
                        XMLHttpRequest.setRequestHeader("accessToken", sessionStorage.getItem("accessToken"));
                    },
                    //请求成功后的回调函数
                    //result是请求成功后返回的Json结果
                    success: function (result) {
                        if (result.code == 200) {
                            alertUtil.message(result.msg);
                            //关闭模态框
                            $('#add_user_modal').modal('hide');
                            //跳转到尾页
                            to_page(totalRecords);
                        } else {
                            let errorMap = result.dataMap.fieldErrors;
                            showAllError(errorMap);
                            alertUtil.message(result.msg, "danger");
                        }
                    },
                    error: function () {
                        alertUtil.message("服务器后端未响应!", "danger");
                    }
                });
            }
        });

        //绑定全选框的点击事件
        $("#user_check_all").off("click").click(function () {
            //用.prop()函数来获取或修改dom原生的属性
            let nowCheckAll = $(this).prop("checked");
            $(".user_check_item").prop("checked", nowCheckAll);
        });

        //绑定单行数据选框的点击事件
        $(document).off("click", ".user_check_item").on("click", ".user_check_item", function () {
            //选中的数量和全部可选中的数量是否相等的标识
            let isCheckAll = $(".user_check_item:checked").length == $(".user_check_item").length;
            $("#user_check_all").prop("checked", isCheckAll);
        });

        //绑定单行用户修改按钮的事件
        $(document).off("click", ".update_user_btn").on("click", ".update_user_btn", function () {
            clearAllError();
            let userID = $(this).parents("tr").find("td:eq(1)").text();
            let username = $(this).parents("tr").find("td:eq(2)").text();
            let nickname = $(this).parents("tr").find("td:eq(3)").text();
            let email = $(this).parents("tr").find("td:eq(5)").text();
            $("#id_update_input").val(userID);//需更新的id
            $("#username_update_input").val(username);//需更新的用户名
            $("#nickname_update_input").val(nickname);//昵称
            $("#email_update_input").val(email);//昵称

            $('#update_user_modal').modal({
                show: true,
                backdrop: 'static'
            });
        });

        //确认更新按钮
        $('#update_user_btn').off("click").click(function () {
            let id = $("#update_user_modal input[name='id']").val();
            let username = $("#update_user_modal input[name='username']").val();
            let password = $("#update_user_modal input[name='password']").val();
            let nickname = $("#update_user_modal input[name='nickname']").val();
            let email = $("#update_user_modal input[name='email']").val();

            let userData = {
                id: id,
                username: username,
                password: password,
                nickname: nickname,
                email: email
            };
            let userJsonData = JSON.stringify(userData);
            console.log("userJsonData:");
            console.log(userJsonData);

            $.ajax({//请求修改该角色
                url: userInterface,
                data: userJsonData,
                contentType: 'application/json;charset=utf-8',
                type: "PUT",
                beforeSend: function(XMLHttpRequest ) {
                    //在请求头部设置accessToken
                    XMLHttpRequest.setRequestHeader("accessToken", sessionStorage.getItem("accessToken"));
                },
                //请求成功后的回调函数
                //result是请求成功后返回的Json结果
                success: function (result) {
                    if (result.code == 200) {
                        alertUtil.message(result.msg);
                        //关闭模态框
                        $('#update_user_modal').modal('hide');
                        //跳转到当前页
                        to_page(nowPage);
                    } else {
                        let errorMap = result.dataMap.fieldErrors;
                        showAllError(errorMap);
                        alertUtil.message(result.msg, "danger");
                    }

                },
                error: function () {
                    alertUtil.message("服务器后端未响应!", "danger");
                }
            });
        });

        //单行删除按钮的点击事件
        $(document).off("click", ".delete_user_btn").on("click", ".delete_user_btn", function () {
            let roleID = $(this).parents("tr").find("td:eq(1)").text();
            let username = $(this).parents("tr").find("td:eq(2)").text();
            $("#delete_id_p").empty().text(roleID);//添加删除的id
            $("#delete_tip_p").empty()
                .append("确认删除用户<strong>[" + username + "]</strong>吗？<strong>注意，此操作不可逆！</strong>");//添加删除的提示
            //alertUtil.message("确认删除id为" + roleID + "的角色吗？", "warning");

            $("#delete_user_modal").modal({//弹出模态框
                backdrop: "static"
            });
        });

        //确认删除按钮的点击事件
        $("#delete_user_btn").off("click").click(function () {
            let userIdList = $("#delete_id_p").text();//找到要删除的id列表

            $.ajax({//请求删除该用户
                url: userWithRoleInterface+"?idList="+userIdList,
                // data: "idList=" + userIdList,
                type: "DELETE",
                beforeSend: function(XMLHttpRequest ) {
                    //在请求头部设置accessToken
                    XMLHttpRequest.setRequestHeader("accessToken", sessionStorage.getItem("accessToken"));
                },
                //请求成功后的回调函数
                //result是请求成功后返回的Json结果
                success: function (result) {
                    if (result.code == 200) {
                        alertUtil.message(result.msg);
                    } else {
                        alertUtil.message(result.msg, "danger");
                    }
                    $("#delete_user_modal").modal('hide');//关闭删除模态框
                    to_page(nowPage);//跳转到当前页(刷新)
                },
                error: function () {
                    $("#delete_user_modal").modal('hide');//关闭删除模态框
                    alertUtil.message("服务器后端未响应!", "danger");
                }
            });
        });
        bindOnEvent_finish = true;
    }

</script>

